import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { hasToken } from 'utils/storage';

// 将路由守卫的组件，封装成一个可复用的组件
export class AuthRoute extends React.Component {
  render() {
    //  将复用组件的传递的属性，在props里面解构出来
    // 其中，这个path就是使用这个组件的时候，传递过去的路径，这个component就是传递过去的那个组件，但是组件复用，不能够使用小写开头的，所以需要给其重新命名
    const { path, component: Component, ...restprops } = this.props;
    console.log(35, path, Component);
    return (
      /*
      学习目标：render自定义组件，进行路由守卫
      步骤：
         1. render是一个函数，里头返回的是一个jsx的语句
         2. 当实现阻拦功能的时候，组件里面的props是会丢失的，因为之前不是自定义组件的时候，是原生自动给我们加了props里面的属性以及内容
         3. 所有我们需要手动将props传递给自定义的组件Layout
    */
      <Route
        {...restprops}
        path={path}
        // component={Layout}
        render={_props => {
          // 1，判断有没有token，有token，就放行，进入到Layout页面
          if (hasToken()) {
            return <Component {..._props} />;
          }
          // 2，没有token，那么不管去哪个页面都让其重定向到登录页面
          return <Redirect to="/login"></Redirect>;
        }}
      ></Route>
    );
  }
}
